<template>
    <div class="qrcode-box ke-box">
        <div class="qrcode-box-left">
            <div class="title">待付金额：</div>
            <div>
                <!-- {{ form.re.amt }} -->
                <el-input v-model="form.re.amt" disabled />
            </div>
        </div>
        <div class="qrcode-box-left">
            <div class="title">交易号：</div>
            <div><el-input v-model="form.re.payCode" placeholder="交易号" @focus="focusForm('payCode')" @blur="blurForm"
                    clearable />
            </div>
        </div>

        <!-- <div class="qrcode-box-left">
            <div class="title"></div>
            <div>
                <el-button @click="handlePay" class="search-btn">网上支付查询</el-button>
            </div>
        </div> -->

        <div class="qrcode-box-left">
            <div class="title">备注：</div>
            <div><el-input v-model="form.re.remark" placeholder="输入备注" @focus="focusForm('remark')" @blur="blurForm"
                    clearable />
            </div>
        </div>
        <PayDialog ref="PayRef" v-if="PayVisible" :visible="PayVisible" @emitCancel="emitPayCancel"
            @emitSubmit="emitPaySubmit" />
    </div>
</template>

<script setup >
import { formatDate } from '@/utils/chenhao'
import PayDialog from '@/views/workbench/onorder/payDialog.vue'
const props = defineProps({
    form: {
        type: Object,
        // default: () => ({})
    },
})
let { form } = props;
const emit = defineEmits(['emitCancel', 'emitSubmit', 'emitPaySuccess'])

// 父组件小键盘点击确定
const handleConfirm = (params) => {
    form.re.remark = form.re.remark
    form.re.amtAct = form.re.amt
    form.re.finishType = '成功'
    form.re.createTime = formatDate('YY-MM-DD hh:mm:ss')

    if(!form.re.payCode) {
      ElNotification({
        title: '提示',
        message: '请输入交易号',
        type: 'warning',
       })
      return 
    }
    emit('emitPaySuccess', 'emitPaySuccess')
}

defineExpose({ handleConfirm })
// 数字键盘
const focusForm = (str) => {
    // keyboard.value = true
    emit('focusForm', str)
}
const blurForm = (params) => {
    // keyboard.value = false
}

// 点击网上支付查询
let PayVisible = ref(false)
const PayRef = ref()
const handlePay = (name) => {
    PayVisible.value = true
    //   nextTick(() => {
    //     PayRef.value.open(user.re)
    //   });
}
// 取消表格弹窗
const emitPayCancel = (params) => {
    console.log(params)
    PayVisible.value = false
}
// 提交表格弹窗
const emitPaySubmit = (params) => {
    console.log(params)
    PayVisible.value = false
}

</script>

<style scoped lang="scss">
.qrcode-box {
    .title {
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        width: 100px;
        text-align: right;
    }

    .qrcode-box-left {
        margin-top: 20px;
        display: flex;
        align-items: center;
        // font-size: 16px;
        color: #999999;

        .finish-box {
            // position: reactive;
            display: flex;
            align-items: center;
            size: 16px;
            color: #FF3333;
            height: 50px;
            // font-size: 16px;

            .finish-type-success {
                ::v-deep {
                    .el-input__inner {
                        font-size: 16px;
                        color: #67C23A;

                    }
                }
            }

            .finish-type-others {
                ::v-deep {
                    .el-input__inner {
                        font-size: 16px;
                        color: #FF3333;

                    }
                }
            }

            .countdown {
                // position: absolute;
                // margin-top: -37px;
                // left: 130PX
            }
        }

        .select-pay-btn {
            width: 160px;
            height: 48px;
            background: #FFE566;
            border-radius: 8px;
            font-size: 18px;
            color: #212121;
            border: 0;
            margin-left: 20px;
        }
    }

    .qrcode-box-right {
        margin-top: 20px;
        display: flex;
        align-items: center;
        position: relative;

        // .title{
        //     width: 100px;
        // }
        .qrcode {
            width: 24px;
            height: 24px;
            background-image: url('https://oss.jtmckj.com/pc/images/vip/qrcode.png');
            background-size: 24px 24px;
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            top: 12px;
            left: 340px;
            cursor: pointer;
        }

        ::v-deep {

            .el-input__wrapper,
            .el-input__inner {
                cursor: pointer;
            }
        }

    }



    ::v-deep {
        .el-input {
            width: 270px;
            height: 40px;
            background: #F9F9F9;
            border-radius: 8px;
            font-weight: 400;
            font-size: 16px;
            color: #999999;
        }
    }
}

.search-btn {
    width: 120px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #E6E6E6;
    font-weight: 400;
    font-size: 16px;
    color: #FF6A00;
    float: right;
}
.ke-box {
    height: 300px;
}
</style>
